<template>
  <view>
    
    <my-message-top></my-message-top>
    
    <view class="my-message-nav">
      <view class="my-message-nav-box1" @click="getMes1">
        <image src="/static/message/nav/group135.png" mode=""></image>
        <text>评论</text>
      </view>
      
      <view class="my-message-nav-box2" @click="getMes2">
        <image src="/static/message/nav/group136.png" mode=""></image>
        <text>点赞</text>
      </view>
      
      <view class="my-message-nav-box3">
        <image src="/static/message/nav/group137.png" mode=""></image>
        <text>投喂</text>
      </view>
      
      <view class="my-message-nav-box4" @click="getMes4">
        <image src="/static/message/nav/group138.png" mode=""></image>
        <text>通知</text>
      </view>
    </view>
    
    <view class="my-message-main" v-if="active === 3">
      <view v-for="(item, i) in mesList4" :key="i"  @click="gotoInformDetail(item)">
        <my-inform :inform="item" ></my-inform>
      </view>
    </view>
    
    <view class="my-message-main1" v-if="active === 0">
      <block v-for="(item,i) in mesList1" :key="i">
        <my-comment :comments="item"></my-comment>
      </block>
    </view>
    
    <view class="my-message-main2" v-if="active === 1">
      <block v-for="(item,i) in mesList2" :key="i" >
        <my-like :likes="item"></my-like>
      </block>
    </view>
  </view>
</template>

<script>
  import {getArticleList} from '../../api/article.js'
  import {getMyComment,getMyLike} from '../../api/messages·.js'
  export default {
    data() {
      return {
        active: 0,
        mesList4:[],
        mesList1:[],
        mesList2:[],
        queryObj: {
              
              pageNum: 1,
              
              pageSize: 6,
              module:-1
            }
      };
    },
    onLoad(){
      this.getMes1()
    },
    methods:{
      navBack(){
       
        uni.switchTab({
        	url: '/pages/community/community'
        });
      },
      async getMes4(){
        const {data:{data:res}} = await getArticleList(this.queryObj)
        this.active = 3
        console.log(res);
        this.mesList4 = res.articles
        console.log(this.mesList4);
      },
      async getMes1(){
        const {data:{data:res}} = await getMyComment()
        console.log(res);
        this.active = 0
        this.mesList1 = res.comments
        console.log(this.mesList1);
      },
     async getMes2(){
       const {data:{data:res}} = await getMyLike()
       console.log(res,'我喜欢的');
       this.active = 1
       this.mesList2 = res.likes
       console.log(this.mesList2);
     },
     gotoInformDetail(item){
       console.log(666);
       uni.navigateTo({
         url: '/subpkg/inform-detail/inform-detail?aid=' + item.id
       })
     }
    }
  }
</script>

<style lang="scss">
.custom-nav-bar {  
  position: relative;   
 height: 220rpx;  
    
  .nav-bar-bg1 {
    position: absolute;
    top: 0;
    left: 0;  
    right: 0;  
    width: 100%;  
    height: 100%;  
    z-index: -1;
  }  
  .nav-bar-bg2{
    position: absolute;
    top: 80rpx;
    left: 35rpx;
    width: 64rpx;
    height: 64rpx;
  }
  .nav-title {  
    position: absolute;
    font-size: 25px;
    font-weight: bold;  
    color: #666666;  
    top: 80rpx;
    left: 275rpx;
    z-index: 999;
  }
}  

.my-message-nav {
  width: 680rpx;
  height: 188rpx;
  margin: 0 35rpx;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 20rpx;
  
  .my-message-nav-box1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    image{
      width: 76rpx;
      height: 76rpx;
    }
    text{
      font-size: 15px;
      font-weight: bold;
    }
  }
  .my-message-nav-box2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    image{
      width: 76rpx;
      height: 76rpx;
    }
    text{
      font-size: 15px;
      font-weight: bold;
    }
  }
  .my-message-nav-box3{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    image{
      width: 76rpx;
      height: 76rpx;
    }
    text{
      font-size: 15px;
      font-weight: bold;
    }
  }
  .my-message-nav-box4{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    image{
      width: 76rpx;
      height: 76rpx;
    }
    text{
      font-size: 15px;
      font-weight: bold;
    }
  }
}

.my-message-main{
  display: flex;
  flex-direction: column;
}

.my-message-main1{
  display: flex;
  flex-direction: column;
}

.my-message-main2{
  display: flex;
  flex-direction: column;
}
</style>
